<template>
  <el-dialog
    :title="`${deptName}禁毒业务架构`"
    v-if="visible && deptName"
    :visible.sync="visible"
    close-on-click-modal
    width="50%"
    :before-close="handleClose">
    <span>
      <el-collapse v-model="ldxzCollapse">
        <el-collapse-item title="领导小组" name="1">
          <el-tag v-for="u in userList.filter(d=>d.businessSubType==='member_ldxz')" :key="u.id" style="margin-right: 8px;">{{u.nickName}}</el-tag>
          <span v-if="userList.filter(d=>d.businessSubType==='member_ldxz').length===0" style="text-align: center;width: 100%;">暂无相关领导小组</span>
        </el-collapse-item>
      </el-collapse>
      <el-collapse v-model="jdzgCollapse">
        <el-collapse-item title="禁毒专干小组" name="1">
          <el-tag v-for="u in userList.filter(d=>d.businessSubType==='member_jdzg')" :key="u.id" style="margin-right: 8px;">{{u.nickName}}</el-tag>
          <span v-if="userList.filter(d=>d.businessSubType==='member_jdzg').length===0" style="text-align: center;width: 100%;">暂无相关禁毒专干</span>
        </el-collapse-item>
      </el-collapse>
      <el-collapse v-model="zzsgCollapse">
        <el-collapse-item title="帮扶小组" name="1">
          <el-tag v-for="u in userBfList" :key="u.helpGroupId" style="margin-right: 8px;">{{u.name}}</el-tag>
          <span v-if="userBfList.length===0" style="text-align: center;width: 100%;">暂无相关帮扶小组</span>
        </el-collapse-item>
      </el-collapse>
    </span>
  </el-dialog>
</template>

<script>
import {listUserByDeptId} from "@/api/system/user";
import {loadHelpGroupByDeptId} from "@/api/user/common";

export default {
  name: "structDetail",
  data() {
    return {
      visible: false,
      deptName: undefined,
      userList: [],
      userBfList: [],
      ldxzCollapse: "1",
      jdzgCollapse: "1",
      zzsgCollapse: "1",
    }
  },
  methods: {
    open(deptId, deptName) {
      this.deptName = deptName
      listUserByDeptId(deptId).then(res=> {
        this.userList = res.data || []
        loadHelpGroupByDeptId(deptId).then(res=> {
          this.userBfList = res.data || []
        })
      }).finally(()=> {
        this.visible = true
      })
    },
    handleClose() {
      this.deptName = undefined
      this.userList = []
      this.visible = false
    },
  }
}
</script>

<style scoped>

</style>
